<template>
<el-dialog
    title="查看"
    v-model="visible"
    width="444px"
    >
    <div class="see-svg">
        <div class="add">
            <div  class="svg">
                <span v-html="form.content"></span>
            </div>
        </div>
       <p><span>名称：</span> {{form.name}} </p>
       <p><span>iconclass：</span>{{form.iconClass}} </p>
    </div>
</el-dialog>

</template>
<script>
import {ref,getCurrentInstance,onMounted, reactive, warn} from "vue"

import {addSvg,delSvg,updateSvg} from "@/utils/api"
export default {
    name:"add-svg",
    setup(){
        // 获取当前的上下文实例
        const { proxy:ctx } = getCurrentInstance()
        let visible =  ref(false);
        let form = reactive({});
        const open = (opts={})=>{
            visible.value = true;
            for(let i in form){
                delete form[i]
            }
            for(let i in opts){
                form[i] = opts[i];
            }
        }
        const beforeClose = (done)=>{
            ctx._promise && ctx._promise.resolve && ctx._promise.resolve();
            done();
        }
        return {
            visible,
            open,
            form
        }
    }
}
</script>
<style lang="scss">
.see-svg{
     .add{
        width: 320px;
        height: 320px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 300px;
        margin: 0 auto;
        overflow: hidden;
        .svg{
            padding: 10px;
            background-position: 0 0,5px 5px;
            background-size: 10px 10px;
            background-image: linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee 100%),
            linear-gradient(45deg,#eee 25%,#fff 25%,#fff 75%,#eee 75%,#eee 100%);
            margin-bottom: 10px;
            width: 100%;
            height: 100%;
            svg{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
    >P{
        text-align: center;
        margin: 10px;
    }
}
</style>